@import './base.scss';

.roy-designer-container {
  .roy-fade-enter-active {
    animation: fadeIn 1s;
  }

  .roy-fade-leave-active {
    animation: fadeOut 1s;
  }

  .roy-slide-enter-active {
    animation: slideInLeft 0.58s;
  }

  .roy-slide-leave-active {
    animation: slideOutLeft 0.8s;
  }

  .indicator .value {
    // 修改标尺提示坐标背景色
    background: #4579e1;
    color: #fff;
  }

  .roy-wang-editor {
    border: 1px solid var(--roy-border);
    box-shadow: rgba(99, 99, 99, 0.2) 0 2px 8px 0;
    cursor: initial;

    .w-e-drop-panel {
      min-width: 400px;
    }
  }

  .roy-binding-value {
    background: var(--roy-color-info-light-8);
    padding: 3px;
    border-radius: 3px;
    border: 1px solid var(--roy-color-info);
  }
}

.roy-btn-radio-group {
  .roy-btn-radio-group__btn {
    background: var(--roy-bg-color-page);
    height: 24px;
    width: 24px;
    font-size: 14px;
    line-height: 24px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    &:hover {
      color: #ffffff !important;
      background: var(--roy-color-primary-light-3);
    }

    & + .roy-btn-radio-group__btn {
      margin-left: 5px;
    }

    &.roy-btn-radio-group__btn--active {
      background: var(--roy-color-primary);
      color: #fff;
    }
  }
}

.roy-dropdown-menu {
  display: grid;
  justify-content: center;
  max-height: 200px;
  overflow-y: auto;
  width: 100%;

  li {
    list-style-type: none;
    cursor: pointer;
    margin: 0;
    text-align: left;
    width: 100%;
    padding: 8px 5px;

    &:hover {
      background: #3e6dcb;
      color: #fff;
    }
  }
}
